<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script>
        // 1.变量作用域： 变量在什么范围内是可用的
        // {
        //     var name = 'why';
        //     console.log(name);
        // }
        // console.log(name);   // 这也可以用，但会变量污染

        const btns = document.getElementsByTagName('button');
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                console.log('第' + i + '个按钮被点击');
            })
        }

        // es5之前因为if和for都没有块级作用域的概念，所以在很多时候要借助function的作用域
        // 就是传说中的函数的闭包的意思
        // es6之后加入了let,let它是有if和for的块级作用域


        // 定义时绑定||运行时绑定？？？？

        // 闭包代码
        // var btns = document.getElementsByTagName('button');
        // for (let i = 0; i < btns.length; i++) {
        //     (function (i){
        //         btns[i].addEventListener('click', function () {
        //             console.log('第' + i + '个按钮被点击');
        //         })
        //     }(i))   
        //     //  自调
        // }
    </script>
    
</body>
</html>